<template>
  <div class="main_right_top" ref="leftBottom">
    <div class="main_right_top_top">
      <span class="title">权益金使用率</span>
      <span class="title">权益金使用率</span>
      <span class="title">权益金使用率</span>
      <span class="title">权益金使用率</span>
    </div>
    <!-- <div class="box_mian_top"></div> -->
    <div class="box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "main_right_top",
  props: {
    width: { type: String, default: "100%" },
    heigth: { type: String, default: "100%" },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".box"), null, {
      width: 700,
      height: 250,
    });
    // 绘制图表
    myChart.setOption({
      xAxis: {
        type: "category",
        data: ["01/01", "02/01", "03/01", "04/01", "05/01", "06/01"],
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: true,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
          },
        },
        name: "人",
        nameTextStyle: {
          color: "#aaa",
          nameLocation: "start",
        },
      },
      series: [
        {
          data: [310, 200, 100, 260, 200, 200],
          type: "line",
        },
      ],
    });
  },

  methods: {},
};
</script>

<style scoped lang="css">
.main_right_top {
  height: 100%;
  width: 100%;
}
.main_right_top_top {
  height: 46px;
  background-image: url("../../../assets/5r678Fx1_1583817896809_okN8qlk6u.png");
  background-repeat: no-repeat;
  background-size: 729px 46px;
}
.main_right_top .title {
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  font-weight: normal;
  text-align: left;
  letter-spacing: 4px;
  line-height: 44px;
  color: #fff;
  text-shadow: rgb(84 76 255) 0px 0px 8px;
}
.box {
  position: relative;
  left: -60px;
  top: -20px;
  min-height: 230px;
  padding: 0px;
  box-sizing: border-box;
}
</style>
